<template>
  <transition name="el-zoom-in-center">
    <div class="search-blog">
      <div class="s-b-title">
        <span class="s-b-t">
          博客检索
        </span>
        <span class="s-b-close">
          <svg-icon @click="closeSearchBlogHandle" icon-class="close" class="s-b-c-icon fz16"/>
        </span>
      </div>
      <div class="s-b-content">
        <el-input v-model="searchWord" size="mini" @clear="clearWordHandle" clearable placeholder="根据标题检索博客"></el-input>
      </div>
      <div class="s-b-button">
        <el-button :loading="dataLoad" @click="searchBlogHandle"
                   type="primary" size="mini" plain
                   class="s-b-b-btn">搜索</el-button>
      </div>
    </div>
  </transition>
</template>

<script>
  /*
    博客检索组件
   */
  export default {
    name: "search-blog",
    props: {
      // 数据是否加载
      dataLoad: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 博客检索文本
        searchWord: '',
      }
    },
    methods: {
      // 初始化检索文本事件
      init(word) {
        console.log("参数：", word)
        this.searchWord = word
      },
      // 获取检索文本事件
      getSearchWord() {
        console.log("调用Get方法")
        return this.searchWord
      },
      // 检索博客按钮事件
      searchBlogHandle() {
        this.$emit('search-blog', this.searchWord)
      },
      // 清空检索内容触发事件
      clearWordHandle() {
        this.$emit('clear-word', this.searchWord)
      },
      // 关闭检索博客组件
      closeSearchBlogHandle() {
        this.$emit('close-search', this.searchWord)
      }
    }
  }
</script>

<!-- 博客检索框样式 -->
<style scoped>
.search-blog {
  width: calc(100% - 10);
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #0f95b0;
  border-radius: 4px;
}
.search-blog .s-b-title {
  height: 30px;
  line-height: 30px;
  padding: 0 7px;
  border-bottom: 1px solid #0f95b0;
}
.s-b-title .s-b-t {
  font-size: 14px;
  font-weight: bold;
}
.s-b-title .s-b-close {
  float: right;
  margin-right: 5px;
  cursor: pointer;
}
.s-b-close .s-b-c-icon {
  transition: color .28s;
}
.s-b-close .s-b-c-icon:hover {
  color: #0f95b0;
}
.search-blog .s-b-content {
  margin-top: 7px;
  padding: 0 5px;
}
.search-blog .s-b-button {
  padding: 0 5px;
  margin: 7px 0;
}
.s-b-button .s-b-b-btn {
  width: 100%;
}
</style>
